<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <link rel="stylesheet" href="vendor/vonic.min.css">

    <style>
        #map-container{
            /*height: 100%;*/
            /*width: 100%;*/
            background-color: #4b8bf4;
        }
    </style>


</head>
<body>
<von-app></von-app>

<!-- 依赖库 axios/vue/vue-router -->
<!--<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>-->
<script src="vendor/axios.min.js"></script>
<!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>-->
<script src="vendor/vue.js"></script>
<!--<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>-->
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<!--<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>-->
<script src="vendor/vonic.min.js"></script>

<!-- 高德地图 -->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=9f502e4578f0fa60f3e66b115df1a5dd"></script>

<script>


    // 页面组件
    const Index = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'Home' }">
                <div class="page-content text-center">
                    <h2 class="padding" v-text="msg"></h2>

                    <router-link class="button button-assertive" to="/about">
                    <i class="ion-information-circled"></i> About
                </router-link>
              </div>
            </div>
        `,
        data() {
            return {
                msg: 'Hello! Vonic.'
            }
        }
    };

    const About = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
                <div class="page-content text-center">
                    <h2 class="padding">About</h2>
                    <router-link class="button button-assertive" to="/edit">
                        <i class="ion-information-circled"></i> Edit
                    </router-link>
                    <router-link class="button button-assertive" to="/map">
                        <i class="ion-information-circled"></i> Map
                    </router-link>
              </div>
            </div>
        `
    };

    const Edit = {
        template: `
            <div class="page" v-nav="{title: 'User Info', showBackButton: true}">
                <div class="page-content padding-top">
                    <div class="item item-divider">
                        User Name: {{firstName}} {{lastName}}
                    </div>
                    <von-input type="text" v-model="firstName" placeholder="First Name" label="First Name"></von-input>
                    <von-input type="text" v-model="lastName" placeholder="Last Name" label="Last Name"></von-input>
                    <!--<von-input type="password" v-model="password" placeholder="密码" label="密码" style="margin-bottom: 5px;"></von-input>-->

                    <div class="padding">
                        <button class="button button-positive button-block" @click="postData">Submit</button>
                    </div>
                </div>
            </div>
            `,
            data() {
                return {
                    firstName: '',
                    lastName: '',
                }
            },
            methods: {
                postData() {
                    axios.post('/user', {
                        firstName: this.firstName,
                        lastName: this.lastName
                    })
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
    };

    const Alimap = {
        template: `

            <div class="page" v-nav="{hideNavbar:true}" >
                <div id="map-container" class="page-content padding-top">

                </div>
            </div>
        `,
        mathods:{

        },
        mounted: function(){
            var map = new AMap.Map('map-container', {
                resizeEnable: true,
                zoom:11,
                center: [116.397428, 39.90923]
            });


            /**
             * 添加工具条
             */

            map.plugin(["AMap.ToolBar"], function() {
                map.addControl(new AMap.ToolBar());
            });
            if(location.href.indexOf('&guide=1')!==-1){
                map.setStatus({scrollWheel:false})
            }

        }
    };

    // 路由定义
    const routes = [
        {path: '/', component: Index},
        {path: '/about', component: About},
        {path: '/edit', component: Edit},
        {path: '/map', component: Alimap}
    ];

    // 启动应用
//    Vonic.app.setConfig('pushMethod', 'replace');
    Vue.use(Vonic.app, {
        routes: routes
    });


</script>

</body>
</html>
